import React, { PureComponent } from 'react';
import { Modal, Form, Input, Radio, Select, TreeSelect, Icon } from 'antd';
import { dataTree } from '../../../../utils/dataConversion'
const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}
class usesModal extends PureComponent {
    handleOk = () => {
        const { modal = {}, handleOk, form } = this.props
        const { validateFields, getFieldsValue } = form

        validateFields(errors => {
            if (errors) {
                return
            }
            const data = {
                res: {
                    id: modal.id || new Date().getTime(),
                    ...getFieldsValue()
                },
                fun: Object.keys(modal).length > 0 ? 'upDate' : 'add'
            }
            handleOk(data)
        })
    }
    render() {
        const { dataSource, visible, modal, showModal, form, confirmLoading, icons } = this.props;
        const { getFieldDecorator } = form
        const treeData = dataTree(dataSource)
        return (
            <div>
                <Modal
                    title={Object.keys(modal).length > 0 ? '修改' : '新增'}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={showModal}
                >
                    <Form layout="horizontal">
                        <FormItem label='级别' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('level', {
                                initialValue: modal.level,
                                resetFields: modal.level,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(
                                <Radio.Group>
                                    <Radio value={0}>目录</Radio>
                                    <Radio value={1}>菜单</Radio>
                                </Radio.Group>
                            )}
                        </FormItem>
                        <FormItem label='上级目录' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('parentId', {
                                initialValue: modal.parentId,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(
                                <TreeSelect
                                    style={{ width: '100%' }}
                                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                    treeData={treeData}
                                    placeholder="如是一级目录，请填 “0”"
                                    treeDefaultExpandAll
                                />
                            )}
                        </FormItem>
                        <FormItem label='名称' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('name', {
                                initialValue: modal.name,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='图标' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('icon', {
                                initialValue: modal.icon,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(
                                <Select
                                    showSearch
                                    style={{ width: 200 }}
                                    placeholder="Select a person"
                                    optionFilterProp="children"
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }>
                                    {
                                        icons.map(item => {
                                            return (
                                                <Option key={item} value={item}>
                                                    <Icon type={item} />
                                                </Option>
                                            )
                                        })
                                    }
                                </Select>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

usesModal = Form.create({ mapPropsToFields(props){
    const { modal } = props;
    const { createFormField } = Form
    return {
        level: createFormField(modal.level),
        parentId: createFormField(modal.parentId),
        name: createFormField(modal.name),
        icon: createFormField(modal.icon)
    };
} })(usesModal);

export default usesModal